<!--<template>-->
<!--	<view class="content">-->
<!--		页面 - 1-->
<!--	</view>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--	data() {-->
<!--		return {-->
<!--			title: 'Hello'-->
<!--		};-->
<!--	},-->
<!--	onLoad() {},-->
<!--	methods: {}-->
<!--};-->
<!--</script>-->

<!--<style>-->
<!--.content {-->
<!--	text-align: center;-->
<!--	height: 400upx;-->
<!--	margin-top: 200upx;-->
<!--}-->
<!--</style>-->

<!--// 在tabbar-1.vue中添加登录功能示例-->
<template>
  <view class="content">
    <view class="login-form">
      <input type="text" v-model="username" placeholder="请输入用户名" />
      <input type="password" v-model="password" placeholder="请输入密码" />
      <button @click="login" :disabled="loading">{{ loading ? '登录中...' : '登录' }}</button>
    </view>
    <view v-if="userInfo" class="user-info">
      <text>登录成功！欢迎 {{ userInfo.username }}</text>
    </view>
  </view>
</template>

<script>
// import api from '../../utils/api.js';
// import { setToken } from '../../utils/auth.js';
import api from '../../../utils/api.js';
import { setToken } from '../../../utils/auth.js';

export default {
  data() {
    return {
      username: '',
      password: '',
      loading: false,
      userInfo: null
    };
  },
  methods: {
    async login() {
      // 简单的表单验证
      if (!this.username || !this.password) {
        uni.showToast({
          title: '请填写用户名和密码',
          icon: 'none'
        });
        return;
      }

      this.loading = true;
      try {
        // 调用登录接口
        const res = await api.userLogin({
          username: this.username,
          password: this.password
        });

        // 登录成功后保存token
        if (res.code === 200 && res.data && res.data.token) {
          setToken(res.data.token);

          // 可以继续调用获取用户信息的接口
          this.getUserInfo();

          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
        }
      } catch (error) {
        console.error('登录失败', error);
        // 错误处理已经在request.js的响应拦截器中处理了
      } finally {
        this.loading = false;
      }
    },

    async getUserInfo() {
      try {
        const res = await api.userInfo({});
        if (res.code === 200) {
          this.userInfo = res.data;
        }
      } catch (error) {
        console.error('获取用户信息失败', error);
      }
    }
  }
};
</script>

<style>
.login-form {
  width: 80%;
  margin: 50upx auto;
}

input {
  width: 100%;
  height: 80upx;
  border: 1upx solid #ccc;
  border-radius: 10upx;
  margin-bottom: 30upx;
  padding: 0 20upx;
  box-sizing: border-box;
}

button {
  width: 100%;
  height: 80upx;
  background-color: #007aff;
  color: white;
  border-radius: 10upx;
}

.user-info {
  text-align: center;
  margin-top: 50upx;
  color: #007aff;
}
</style>
